<script lang="ts">
//使用<keep-alive></keep-alive>缓存路由必须显式的声明name
export default {
  name: "supplier",
};
</script>

<script setup lang="ts">
import {
  Search,
  Plus,
  Refresh,
  Setting,
  EditPen,
  Delete,
  Finished,
  CopyDocument,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted, nextTick, computed } from "vue";
import {
  get_supplierinfo,
  insert_supplierinfo,
  update_supplierinfo,
  delete_supplierinfo,
} from "../../request/api";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";

//加载开关
const loading = ref(false);
//供应商表格列表
const suppliertable = ref([]);
//弹出框类型0是新增1是修改
const dialogtype = ref(0);
//弹出框真假
const dialogsupplier = ref(false);
//当前页
const currentPage = ref(1);
//总页数
const total = ref(0);
//每页显示条目个数
const pageSize = ref(10);
//每页多少条
const size = ref("");
//新增和修改的表单
const supplierform = reactive({
  supplier_name: "",
  supplier_address: "",
  supplier_email: "",
  supplier_phone: "",
  supplier_landline: "",
  supplier_contacts: "",
  supplier_corporation: "",
  supplier_bank: "",
  supplier_bankaccount: "",
  supplier_taxnumber: "",
  supplier_homepage: "",
  supplier_remark: "",
});
//表单规则
const supplierruleform = reactive({
  supplier_name: [
    {
      required: true,
      message: "供应商名不能为空",
      trigger: "blur",
    },
  ],
});

//供应商id
const supplierid = ref(0);

type FormInstance = InstanceType<typeof ElForm>;
const supplierformref = ref<FormInstance>();

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});

//页面进入请求数据
const { data } = await get_supplierinfo(currentPage.value, pageSize.value);
if (data.code == 200) {
  console.log(data.data);
  total.value = data.data.total;
  suppliertable.value = data.data.data;
  console.log(data);
}
//刷新
const refreshtable = async (currentPage, pageSize) => {
  loading.value = true;
  const { data } = await get_supplierinfo(currentPage, pageSize);
  loading.value = false;
  if (data.code == 200) {
    console.log(data.data);
    total.value = data.data.total;
    suppliertable.value = data.data.data;
    console.log(data);
  }
};

//监听current-page事件
const handleCurrentChange = async (newpage) => {
  refreshtable(newpage, pageSize.value);
};

//监听page-size每页条数
const handleSizeChange = async (pagesize) => {
  refreshtable(currentPage.value, pagesize);
};
//关闭模态框之前清空表单数据
const beforeclosedialog = (done) => {
  //清空表单数据
  supplierformref.value!.resetFields();
  return done(false);
};

//点击修改按钮
const updateclick = (row) => {
  dialogtype.value = 1;
  dialogsupplier.value = true;
  nextTick(() => {
    supplierform.supplier_name = row.supplier_name;
    supplierform.supplier_address = row.supplier_address;
    supplierform.supplier_email = row.supplier_email;
    supplierform.supplier_phone = row.supplier_phone;
    supplierform.supplier_landline = row.supplier_landline;
    supplierform.supplier_contacts = row.supplier_contacts;
    supplierform.supplier_corporation = row.supplier_corporation;
    supplierform.supplier_bank = row.supplier_bank;
    supplierform.supplier_bankaccount = row.supplier_bankaccount;
    supplierform.supplier_taxnumber = row.supplier_taxnumber;
    supplierform.supplier_homepage = row.supplier_homepage;
    supplierform.supplier_remark = row.supplier_remark;
  });
  supplierid.value = row.supplier_id;
};

//点击状态开关
const switchlick = async (row) => {
  supplierid.value = row.supplier_id;
  let updatedata = {
    supplier_switch: row.supplier_switch,
  };

  const { data } = await update_supplierinfo(supplierid.value, updatedata);

  if (data.code == 200) {
    ElMessage.success(data.msg);
  } else {
    ElMessage.error(data.msg);
    refreshtable(currentPage.value, pageSize.value);
  }
};

//点击删除按钮
const delclick = async (row) => {
  const { data } = await delete_supplierinfo(row.supplier_id);
  if (data.code == 200) {
    ElMessage.success(data.msg);
    refreshtable(currentPage.value, pageSize.value);
  } else {
    ElMessage.error(data.msg);
  }
};

//点击新增或修改弹出框的确认按钮
const dialogsupplierclick = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      //新增
      if (dialogtype.value == 0) {
        const { data } = await insert_supplierinfo(supplierform);
        if (data.code == 200) {
          ElMessage.success(data.msg);

          refreshtable(currentPage.value, pageSize.value);
          formEl.resetFields();
          dialogsupplier.value = false;
        } else {
          ElMessage.error(data.msg);
        }
      } else if (dialogtype.value == 1) {
        //修改
        const { data } = await update_supplierinfo(supplierid.value, supplierform);
        if (data.code == 200) {
          ElMessage.success(data.msg);
          formEl.resetFields();
          refreshtable(currentPage.value, pageSize.value);
          dialogsupplier.value = false;
        } else {
          ElMessage.error(data.msg);
          // formEl.resetFields();
        }
      }
    } else {
      console.log("验证失败");
    }
  });
};
</script>

<template>
  <div class="el-card_body">
    <el-table
      v-loading="loading"
      :data="suppliertable"
      height="calc(100vh - 300px)"
      style="width: 100%"
    >
      <el-table-column label="Address Info">
        <template #header>
          <div class="ele-table-tool ele-table-tool-default">
            <el-button
              type="primary"
              :icon="Plus"
              @click="
                dialogsupplier = true;
                dialogtype = 0;
              "
              >添加</el-button
            >
            <div class="ele-tool">
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-button
                  size="small"
                  @click="refreshtable(currentPage, pageSize)"
                  :icon="Refresh"
                ></el-button>
              </el-tooltip>

              <el-tooltip effect="dark" content="列设置" placement="top">
                <el-button size="small" :icon="Setting"></el-button>
              </el-tooltip>
            </div>
          </div>
        </template>
        <el-table-column type="expand">
          <template #default="props">
            <div style="display: flex">
              <div class="vab-table-expand">
                <p>
                  <span class="vab-table-expand-title"> 座机:</span>
                  {{ props.row.supplier_landline }}
                </p>
                <p>
                  <span class="vab-table-expand-title"> 法人名称:</span>
                  {{ props.row.supplier_corporation }}
                </p>

                <p>
                  <span class="vab-table-expand-title"> 银行:</span>
                  {{ props.row.supplier_bank }}
                </p>
                <p>
                  <span class="vab-table-expand-title"> 银行账号:</span>
                  {{ props.row.supplier_bankaccount }}
                </p>
                <p>
                  <span class="vab-table-expand-title"> 税号:</span>
                  {{ props.row.supplier_taxnumber }}
                </p>
              </div>

              <div class="vab-table-expand">
                <p>
                  <span class="vab-table-expand-title"> 主页:</span>
                  {{ props.row.supplier_homepage }}
                </p>
                <p>
                  <span class="vab-table-expand-title"> 地址:</span>
                  {{ props.row.supplier_address }}
                </p>
              </div>
            </div>

            <!-- <el-descriptions class="margin-top" :column="6" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <iphone />
                    </el-icon>座机
                  </div>
                </template>
                {{ props.row.supplier_landline }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <avatar />
                    </el-icon>法人
                  </div>
                </template>
                {{ props.row.supplier_corporation }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <office-building />
                    </el-icon>银行
                  </div>
                </template>
                {{ props.row.supplier_bank }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <credit-card />
                    </el-icon>银行账号
                  </div>
                </template>
                {{ props.row.supplier_bankaccount }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <money />
                    </el-icon>税号
                  </div>
                </template>
                {{ props.row.supplier_taxnumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <tickets />
                    </el-icon>主页
                  </div>
                </template>
                {{ props.row.supplier_homepage }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">
                    <el-icon :style="iconStyle">
                      <office-building />
                    </el-icon>地址
                  </div>
                </template>
                {{ props.row.supplier_address }}
              </el-descriptions-item>
            </el-descriptions> -->
          </template>
        </el-table-column>
        <el-table-column align="center" type="index" width="50" />
        <el-table-column prop="supplier_name" label="供应商名称" align="center" />

        <el-table-column prop="supplier_contacts" label="联系人" align="center" />
        <el-table-column prop="supplier_phone" label="手机" align="center" />
        <el-table-column prop="supplier_email" label="邮箱" align="center" />
        <el-table-column prop="user_name" label="修改人" align="center" />

        <el-table-column prop="supplier_updatime" label="修改时间" />
        <el-table-column prop="supplier_remark" label="备注" />
        <el-table-column prop="supplier_switch" label="状态" align="center" width="80">
          <template #default="scope">
            <el-switch
              v-model="scope.row.supplier_switch"
              :active-value="1"
              :inactive-value="0"
              @change="switchlick(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template #default="scope">
            <el-button type="text" @click="updateclick(scope.row)" :icon="EditPen"
              >修改</el-button
            >

            <el-popconfirm @confirm="delclick(scope.row)" title="是否确认删除?">
              <template #reference>
                <el-button class="operate" type="text" :icon="Delete">删除</el-button>
              </template>
            </el-popconfirm>
            <!-- <el-button type="text" class="reset" :icon="CopyDocument">重置密码</el-button> -->
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="ele-pagination">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </div>
  </div>
  <!-- 用户新增和修改的弹出框-->
  <el-dialog
    :before-close="beforeclosedialog"
    :title="dialogtype == 0 ? '新增' : '修改'"
    v-model="dialogsupplier"
    width="35%"
  >
    <el-form
      ref="supplierformref"
      :model="supplierform"
      :rules="supplierruleform"
      label-width="85px"
    >
      <el-row style="margin-left: -7.5px; margin-right: -7.5px">
        <el-col :span="24" :sm="12">
          <el-form-item label="供应商名:" prop="supplier_name">
            <el-input
              v-model="supplierform.supplier_name"
              placeholder="请输入供应商名称"
            />
          </el-form-item>
          <el-form-item label="联系人:" prop="supplier_contacts">
            <el-input
              v-model="supplierform.supplier_contacts"
              placeholder="请输入联系人名称"
            />
          </el-form-item>
          <el-form-item label="手机号:" prop="supplier_phone">
            <el-input v-model="supplierform.supplier_phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="邮箱:" prop="supplier_email">
            <el-input v-model="supplierform.supplier_email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="主页:" prop="supplier_homepage">
            <el-input
              v-model="supplierform.supplier_homepage"
              placeholder="请输入供应商主页"
            />
          </el-form-item>
          <el-form-item label="备注:" prop="supplier_remark">
            <el-input
              type="textarea"
              v-model="supplierform.supplier_remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" :sm="12">
          <el-form-item label="法人名称:" prop="supplier_corporation">
            <el-input
              v-model="supplierform.supplier_corporation"
              placeholder="请输入法人名称"
            />
          </el-form-item>
          <el-form-item label="座机:" prop="supplier_landline">
            <el-input v-model="supplierform.supplier_landline" placeholder="请输入座机" />
          </el-form-item>
          <el-form-item label="银行名称:" prop="supplier_bank">
            <el-input v-model="supplierform.supplier_bank" placeholder="请输入银行名称" />
          </el-form-item>
          <el-form-item label="银行账号:" prop="supplier_bankaccount">
            <el-input
              v-model="supplierform.supplier_bankaccount"
              placeholder="请输入银行账号"
            />
          </el-form-item>
          <el-form-item label="税号:" prop="supplier_taxnumber">
            <el-input
              v-model="supplierform.supplier_taxnumber"
              placeholder="请输入税号"
            />
          </el-form-item>
          <el-form-item label="地址:" prop="supplier_address">
            <el-input
              type="textarea"
              v-model="supplierform.supplier_address"
              placeholder="请输入供应商地址"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogsupplier = false, supplierformref!.resetFields();"
          >取消</el-button
        >
        <el-button type="primary" @click="dialogsupplierclick(supplierformref)"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.el-card_body {
  background-color: white;
  padding: 15px;
}
.roleformclass {
  margin-bottom: 15px;
}
/deep/.roleformclass.el-form--inline .el-form-item {
  margin-right: 15px;
}
.ele-table-tool {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
}
.ele-tool {
  margin: 5px 0 5px auto;
}

.ele-pagination {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
/deep/ .operate {
  color: red;
}
/deep/.reset {
  color: #52c41a;
}
/deep/.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: -9px;
  margin-left: 47px;
  // margin-bottom: 20px;
  // margin-right: 20px;
}
.vab-table-expand {
  padding: 20px;
  line-height: 30px;
  margin-right: 20px;
}
.vab-table-expand-title {
  display: inline-block;
  width: 80px;
  font-weight: 700;
}
</style>
